<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: caozaihui 15908754730@163.com
 * @LastEditTime: 2024-06-29 00:14:19
 * @FilePath: \YMU_forum_vue\src\views\Article\components\main\ArticleMain.vue
    @Description: 普通文章详情
-->

<script setup>
import { useRoute } from 'vue-router'
import ArticleComment from './ArticleComment.vue';
import ArticlePreview from '../../../../components/article/ArticlePreview.vue';
import { getHomeArticleDetails, liked } from '@/apis/article.js'
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
const article = ref('')
const route = useRoute()
onMounted(() => {
    getHomeArticleDetails(route.query.aid).then(res => {
        article.value = res.data
    });
})
const like = () => {
    liked(route.query.aid).then(res => {
        console.log("点赞了")
        if (res.code == 0) {
            ElMessage({
                message: "点赞成功！",
                type: 'success',
            })
            article.value.likeCount += 1
        } else {
            ElMessage({
                message: "点赞失败！",
                type: 'error',
            })
        }
    })
}
</script>

<template>
    <div style="min-height: 80vh;margin-top: 60px;">
        <el-row>
            <el-col :lg="4"></el-col>
            <el-col :lg="16" :xs="24">
                <el-card class="card">
                    <div style="margin-bottom: 10px;">
                        <el-text class="title">{{ article.title }}</el-text>
                    </div>
                    <div class="tagLine">
                        <el-text class="text">文章标签:</el-text>
                        <el-tag class="tag" v-for="tag in article.tags">{{ tag.name }}</el-tag>
                    </div>

                    <ArticlePreview :content="article.content" />

                    <div>
                        喜欢的话，点个赞呗
                        <i class="iconfont icon-dianzan" @click="like()"></i>{{ article.likeCount }}
                    </div>
                </el-card>
            </el-col>
            <el-col :lg="4"></el-col>
        </el-row>

        <!-- 评论区 传入评论列表和文章id -->
        <ArticleComment v-if="article.commentabled" />
    </div>
</template>



<style scoped>
.card {
    width: 100%;
    border-radius: 9px;
}

.title {
    font-size: 24px;
    font-weight: bolder;
    color: #000;
    padding-left: 16px;
}

.text {
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}

.iconfont {
    font-size: 25px;
}

.tagLine {
    margin-left: 16px;
    margin-bottom: 10px;
}

.tag {
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>